<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/normalize.css">
    <script src="js/rem.js"></script>
    <style>

        div {
            width:7.5rem;
            height:auto;
            overflow: hidden;
        }

        ul {
            width:100%;
            height:auto;
            display: flex;
            list-style-type: none;
            padding:0;
            overflow-x: scroll;
        }
        ul::-webkit-scrollbar {
            /* display:none; */
            width:0.2rem;
            height:0.2rem;
        }

        ul::-webkit-scrollbar-thumb {
            /* background:red; */
        }


        ul::-webkit-scrollbar-track {
            /* background: yellow; */
        }

        ul::-webkit-scrollbar-button {
            /* background:green; */
            width:0.1rem;
            height:0.1rem;
        }

        ul::-webkit-scrollbar-track-piece {
            /* background:blue; */
            width:0.1rem;
            height:0.1rem;
        }

        ul::-webkit-scrollbar-corner {
            background:pink;
        }

        ul::-webkit-resizer {
            background:red;
        }


        li {
            text-align: center;
            width:1rem;
            height:1rem;
            margin-left:0.12rem;
            margin-right:0.12rem;
            background-color: pink;
            border-radius: 0.12rem;
            flex: 0 0 1rem;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
        </ul>
    </div>

</body>
</html>